<template>
  <div>
    <div v-show="classifyName === 'Vue'">
      <el-collapse v-model="activeName" accordion @change="menuChange(activeName)">
        <el-collapse-item title="表单提交" name="Form">
          <code-form :codeData=codeData />
        </el-collapse-item>
        <el-collapse-item title="PDF生成" name="PDF">
          <code-p-d-f :codeData=codeData />
        </el-collapse-item>
        <el-collapse-item title="Vuex储存" name="Vuex">
          <code-vuex :codeData=codeData />
        </el-collapse-item>
        <el-collapse-item title="分页" name="Pagination">
          <code-pagination :codeData=codeData />
        </el-collapse-item>
      </el-collapse>
    </div>
    <div v-show="classifyName === 'Html'">Html</div>
    <div v-show="classifyName === 'Css'">Css</div>
    <div v-show="classifyName === 'Js'">Js</div>
    <div v-show="classifyName === 'Java'">Java</div>
    <!-- <div v-show="classifyName==='Md'">
      <md></md>
    </div> -->
  </div>
</template>

<script>
import { getCodeMd } from '@/api/codeExamples'
import { importAll } from '@/utils/importAll'
// 创建Context
const allFile = importAll(require.context('./module', true, /\.vue$/))
// 生成待待注册组件集合
const componentsAll = {}
for (const key in allFile) {
  const element = allFile[key].default
  componentsAll[element.name] = element
}

export default {
  name: 'CodeExamples',
  components: { ...componentsAll },
  data() {
    return {
      activeName: 'Form',
      codeData: '',
    }
  },
  props: {
    classifyName: {
      type: String,
    },
  },
  watch: {
    classifyName(val) {
      this.classifyName = val
    },
  },
  mounted() { },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await getCodeMd({
        name: this.activeName,
      })
      this.codeData = res.data.codeData
    },
    async menuChange(activeName) {
      if (activeName === '') return
      this.getList()
    },
  },
}
</script>

<style lang='scss' scoped></style>